script
<template>
  <view>
    <c-navBar
      class="nav_bar"
      title="商品评价"
      :isTran="TRUE"
      isPerch
    ></c-navBar>
    <view class="p30">
      <view class="df aic fww">
        <c-upLoadImgs
          class="mr10 mb10"
          :file.sync="form.imgs"
          maxCount="6"
          :deletable="false"
        ></c-upLoadImgs>
        <c-upLoadImgs
          class="mr10 mb10"
          :file.sync="form.video"
          maxCount="1"
          :deletable="false"
          accept="video"
        ></c-upLoadImgs>
      </view>
      <view class="mt20 df aic">
        <view class="mr20">综合评分</view>
        <u-rate :count="5" @change="startChange" v-model="form.score"></u-rate>
      </view>

      <view class="mt20">
        <u--textarea
          v-model="form.remark"
          placeholder="请输入内容"
          count
          maxlength="200"
        ></u--textarea>
      </view>
      <view class="mt20">
        <u-button type="primary" @click="submit" text="提交评价"></u-button>
      </view>
      <view class="mt20 df aic">
        <view class="ag-box mr10" @click="tabAgree">
          <image
            v-if="form.anonymous"
            src="/static/common/select.png"
            mode=""
          ></image>
          <image v-else src="/static/common/noSelect.png" mode=""></image>
        </view>
        <view>匿名评价</view>
      </view>
    </view>
  </view>
</template>

<script>
import { init_addComment } from "@/api/node.js";

export default {
  data() {
    return {
      form: {
        score: 5,
        anonymous: false,
        remark: "",
        video: "",
        imgs: [],
        orderId: null,
      },
    };
  },

  onLoad(v) {
    this.form.orderId = v?.id;
  },

  methods: {
    startChange(v) {
      this.form.score = v;
    },

    tabAgree() {
      this.form.anonymous = !this.form.anonymous;
    },
    async submit() {
      const { anonymous, imgs, ...others } = this.form;
      let a = anonymous ? 1 : 0;
      const params = {
        ...others,
        anonymous: a,
        imgs: imgs?.toString() || "",
      };

      const res = await init_addComment(params);
      if (res) {
        uni.navigateTo({
          url: `/pages/order/pages/myOrder?type=3`,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.ag-box {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

image {
  width: 34rpx;
  height: 34rpx;
}
/deep/.u-button {
  background-color: #fa3534 !important;
  border-color: #fa3534 !important;
}
</style>
